<template>
  <view>
    <u-modal :show-cancel-button="true" v-model="show" @confirm="confirm" @cancel="show = false" :content="content"></u-modal>
    <view class="u-m-t-20">
      <u-line color=" #a0cfff" />
      <view class="one" :key="300">
        <view>
          <u-icon color="#2B85E4" name="account-fill"></u-icon>
          <text class="txt">{{ ' ' + createUser.num + ' ' + createUser.name }}</text>
        </view>
        <view class="two">
          <u-button v-if="createUser.id !== userId" @click="chat(createUser.id)" type="primary" size="mini">聊天</u-button>
          <text></text>
        </view>
      </view>
      <view class="one" v-for="(member,index) in memberList" :key="index">
        <view>
          <u-icon name="account-fill"></u-icon>
          <text>{{ ' ' + member.num + ' ' + member.name }}</text>
        </view>
        <view class="two">
          <u-button v-if="member.id !== userId" @click="chat(member.id)" type="primary" size="mini">聊天</u-button>
          <text></text>
          <u-button v-if="createUser.id === userId" @click="kickOut(member.id,index)" type="error" size="mini">踢出</u-button>
          <text></text>
        </view>

      </view>
    </view>
    <u-loadmore :status="status" />
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 课程或班级创建者
      createUser: {},
      memberList: [],
      userId: '',
      id: '',
      page: 1,
      status: '',
      total: 0,
      flag: false,
      // 模态框
      show: false,
      content: '您确定要踢出该用户吗？',
      // 当前用户的ID和索引
      currentUserId: '',
      currentUserIndex: ''
    };
  },
  onLoad(e) {
    uni.$emit("setVuexUserInfo",{user:null,isLoginPage: false});
    this.userId = this.$store.getters.id;
    this.id = e.id;
    if(e.flag){
      this.flag = true;
    }
    this.initial();
  },
  onPullDownRefresh(){
    this.initial();
  },
  onReachBottom() {
    this.page = ++ this.page;
    this.status = 'loading';
    if((this.page - 1) * 5 > this.total) {
      setTimeout(() => {
        this.status = 'nomore';
      }, 1000)
    }else {
      this.getCourseUser().then(res => {
        this.total = res.total;
        this.memberList = this.memberList.concat(res.data);
      });
      this.status = 'loadmore';
    }
  },
  methods:{
    initial(){
      this.page = 1;
      this.total = 0;
      this.getUserById().then(res => {
        this.createUser = res.data;
      })
      this.getCourseUser().then(res => {
        this.total = res.total;
        this.memberList = res.data;
        uni.stopPullDownRefresh();
      });

    },
    async getCourseUser(){
      if (!this.flag){
        return await this.$u.api.getCourseUser(this.id,this.page);
      }else {
        return await this.$u.api.getStudentByClazzId(this.page,this.id);
      }
    },
    /**
     * 通过ID获取课程或班级创建者
     * @returns {Promise<*>}
     */
    async getUserById(){
      if (!this.flag) {
        return await this.$u.api.getUserByCourseId(this.id);
      }else {
        return await this.$u.api.getUserByClazzId(this.id);
      }
    },
    chat(id){
      this.$u.api.addFriend({myUid:this.$store.getters.id, friendId:id}).then(res => {
        if (res.code === 200){
          uni.$emit("userListInit")
          uni.switchTab({
            url: '/pages/user_list/user_list'
          })
        }
      })
    },
    kickOut(id,index) {
      this.currentUserId = id;
      this.currentUserIndex = index;
      this.show = true;
    },
    confirm(){
      if (!this.flag) {
        this.$u.api.kickOut(this.currentUserId, this.id).then(res => {
          if (res.code === 200) {
            this.memberList.splice(this.currentUserIndex, 1);
            this.$u.toast("踢出成功！")
          }
        })
      }else {
        this.$u.api.exitClazz(this.currentUserId, this.id).then(res => {
          if (res.code === 200) {
            this.memberList.splice(this.currentUserIndex, 1);
            this.$u.toast("踢出成功！")
          }
        })
      }
    }
  }
}
</script>

<style lang="scss">

.one {
  display: flex;
  justify-content: space-between;
  height: 90rpx;
  border-bottom: 1rpx solid $u-type-primary-disabled;
  line-height: 90rpx;
  font-size: 33rpx;
  font-weight: bold;
  color: $u-main-color;
  .two {
    display: flex;
    justify-content: flex-end;

    // #ifndef MP
    margin-top: 20rpx;
    // #endif

    text {
      margin-left: 15rpx;
    }
  }
}

.txt {
  color: #2B85E4;
}
</style>
